<template>
    <div class="subfieldsr">
    <span class="gengduos"><a href="" target="_blank">更多>></a></span>

    <el-tabs class="eltabsa" v-model="activeName" ref="a" @tab-click="handleClick" >
        <el-tab-pane label="文献检索"  name="first">
            <div class="SwiperBox" ref="SwiperBox" @mouseenter="MouseFun('移入')" @mouseleave="MouseFun('移出')">
                <!-- 图片 -->
                <div class="imgBox" :style="{left:`-${leftVal}px`,transition:`${ition}s`}">
                  <div class="Swiper-item" v-for="(item,index) in imgList" :key="index">
                     <img :src="items.imgUrl" alt="" v-for="(items,indexs) in item" :key="indexs">
                  </div>
                  <!-- 复制第一张放到最后,以实现无缝无线循环滚动效果 -->
                  <div class="Swiper-item">
                   
                        <img :src="items.imgUrl" alt="" v-for="(items,indexs) in imgList[0]" :key="indexs"></img>
                    
                  </div>
                </div>
                <!-- 左箭头按钮 -->
                <div class="leftBtn" @click="throttle(PrevFun)">&larr;</div>
                <!-- 右箭头按钮 -->
                <div class="rightBtn" @click="throttle(NextFun)">&rarr;</div>
                <!-- 下方指示点容器 -->
                <!-- <div class="instBox">
                  <div @click="instFun(index)" v-for="(item,index) in imgList.length" :key="index"
                  :class="['inst',index==imgShow?'instActv':'']">
                  </div>
                </div> -->
            </div>
            <!-- <a href="https://www.hnxb.org.cn/CN/1000-8551/home.shtml" target="blank">
                <img src="https://ifst.caas.cn/images/content/2020-03/20200320160520205135.png" alt="">
            </a>
            <a href="http://www.ganshudianfen.com/" target="blank">
                <img src="	https://ifst.caas.cn/images/2022-01/db81b1d09dd847d1ad28e8505c8bf3f8.jpg" alt="">
            </a>
            <a href="https://peanutsci.ccoaonline.com/sy" target="blank">
                <img src="https://ifst.caas.cn/images/content/2020-03/20200320160618038361.png" alt="">
            </a>
            <a href="http://ncpjgy.com.cn/" target="blank">
                <img src="https://ifst.caas.cn/images/content/2020-03/20200320160657555563.png" alt="">
            </a> -->
        </el-tab-pane>
  </el-tabs>
</div>
</template>
 <script>
      export default {
          data() {
      return {
        activeName: 'first',
            activeNames: 'first',
        imgData: [
          {imgUrl: "https://ifst.caas.cn/images/content/2020-03/20200320160520205135.png"},
          {imgUrl: "	https://ifst.caas.cn/images/2022-01/db81b1d09dd847d1ad28e8505c8bf3f8.jpg"},
          {imgUrl: "https://ifst.caas.cn/images/content/2020-03/20200320160618038361.png"},
          {imgUrl: "https://ifst.caas.cn/images/content/2020-03/20200320160657555563.png"},
        ],
        leftVal:0,  // 轮播图盒子的偏移值
        flag:true, // 用来节流防止重复点击j
        start:null, // 自动执行下一张定的时器
        imgWidth:280,  // 在这里填写你需要的图片宽度
        ition:0.8, // 设置轮播图过度时间
        imgShow:0, // 表示当前显示的图片索引
      };
    },
    computed:{
      // 敲黑板，分组轮播的重点来了！！！！！！！！！！！！！！！！！！！！
      imgList() { // 数组分割
      	let arr = [];
        let num = 4 // 填写需要分割成几个一组的数量
      	if (this.imgData.length) {
      		for (let i = 0; i < this.imgData.length; i += num) {
      			arr.push(this.imgData.slice(i, i + num));
      		}
      	}
      	return arr;
      },
    },
    mounted() {
      // this.imgWidth = this.$refs.SwiperBox.offsetWidth // 自动获取轮播图盒子宽度
      this.奥力给() // 偷偷告诉大家一个小秘密,JavaScript是原生支持中文命名函数或变量的哦
    },
    methods: {
      // 这里定义一个鼠标移入移出事件，鼠标悬停时停止自动轮播，鼠标移出则重新执行自动轮播
      MouseFun(type){// 停止定时器            // 重新执行定时器
        type=='移入'?clearTimeout(this.start):this.奥力给()
      },
      // 此为自动轮播定时器
      奥力给(){
          this.start = setInterval(()=>{
          this.NextFun()
        },100000)
      },
      // 这里通过额外封装的节流函数触发 PrevFun() 和 NextFun(),以达到防止重复点击的效果
      throttle(fun) {
      	if (this.flag) {
      		this.flag = false;
      		fun(); // 此为模板中传递进来的PrevFun()或NextFun()函数
      	  setTimeout(() => {
      			this.flag = true;
      		}, 1200); // 节流间隔时间
      	}
      },
      // 上一张
      PrevFun(){
        if(this.leftVal==0){ // 判断显示的图片 是 第一张时执行
          // this.imgList.length是指循环图片数组的图片个数
          this.ition=0 // 将过渡时间变成0，瞬间位移到最后一张图
          this.imgShow=this.imgList.length-1 // 将高亮小点改为最后一张图
          this.leftVal=(this.imgList.length)*this.imgWidth // 瞬间移动
           setTimeout(()=>{  // 通过延时障眼法,归原过渡时间,执行真正的“上一张”函数
             this.ition=0.8
             this.leftVal -= this.imgWidth
           },this.ition*5000)
        }else{ // 判断显示的图片 不是 第一张时执行
           this.ition=0.8
           this.leftVal -= this.imgWidth
           this.imgShow--
        }
      },
      // 下一张
      NextFun(){
        if(this.leftVal==(this.imgList.length-1)*this.imgWidth){ // 判断显示的图片 是 最后一张时执行
             this.ition=0.8
             this.leftVal+=this.imgWidth
             this.imgShow=0
           setTimeout(()=>{
             this.ition=0
             this.leftVal=0
           },this.ition*5000)
        }else{ // 判断显示的图片 不是 最后一张时执行
           this.ition=0.8
           this.leftVal+=this.imgWidth
           this.imgShow++
        }
      },
      // // 点击小圆点
      // instFun(index){
      //   this.ition=0.8
      //   this.leftVal=index*this.imgWidth
      //   this.imgShow=index
      // },
    }
      };
    </script>
<style scoped>
.SwiperBox {
    position: relative;
    width: 1200px;
    height: 70px;
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid #eee;
    margin: 15px 0 15px 10px;
  }
  .imgBox{
    position: absolute;
    top: 0px;
    left: 0px;
    min-width: 1150px;
    height: 70px;
    display: flex;
    justify-content: flex-start;

  }
  /* 图片默认样式 */
  .Swiper-item {
    flex-shrink: 0;
    width: 1200px;
    height: 70px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .Swiper-item img{
    width: 280px;
    height: 70px;
  }
   /* 两个按钮共有的样式,也可直接使用箭头图片替代 */
  .leftBtn,
  .rightBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(109, 109, 109, 0.65);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
  }
  .leftBtn {
    left: -9px;
  }
  .rightBtn {
    right: 5px;
  }
  /* 下方指示器盒子 */
  .instBox{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    display: flex;
  }
   /* 小圆点 */

  .instActv{
    border: 1px solid #ff0000;
    background: #ff0000;
  }
/deep/.el-dropdown{
    width: 230px;
    height: 40px;
    font-size: 18px;
    color: #000;
    text-align: center;
    line-height: 40px;
    margin-right: 10px;
    border: 1px solid #c5c5c5;
}
/deep/.el-dropdown-menu{
    width: 230px !important;
    height: 300px !important;
}
/deep/a{
   list-style: none;
   color: #000;
   font: 16px;
   text-decoration: none;
}
/deep/.el-dropdown-link {
  
    cursor: pointer;
    color: #000;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
.subfieldsr .gengduos{
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 999;
  }
  .subfieldsr .gengduos a{
    color: #000;
    list-style: none;
    text-decoration: none;
  }
.eltabs li a{
    color: #000;
    list-style: none;
    text-decoration: none;
    display: block;
    line-height: 28px;
    padding-left: 16px;
}
.eltabsa li a{
  color: #000;
  list-style: none;
  text-decoration: none;
  display: block;
  padding-left: 18px;
}
.eltabsa li{
    list-style: none;
    float: left;
    width: 25%;
    line-height: 40px;
    overflow: hidden;
    background: url(../image/sanjiao.png) no-repeat left 13px;
  }
/deep/ .el-tabs__item {
    font-weight: bold; /*设置标签文本加粗*/
    font-size: 20px;
  }
  /deep/ .el-tabs__item:hover {
    font-weight: bold; /*设置标签文本加粗*/
    font-size: 20px;
     color: #000;
  }
  /deep/.el-tabs__item.is-active{
      color: #000;
  }
  /deep/.el-tabs__active-bar{
    background:#069564 ;
  }
  .subfieldsr{
    position: relative;
    width: 1200px;
    margin: 0 auto;
  }
  .eltabsa{
      width: 100%;
  }
</style>